<template>
  <div class="tagBox">
    <el-scrollbar>
      <div class="scrollbar-flex-content">
        <el-dropdown trigger="contextmenu" v-for="(item,ind) in tagList" :key="ind">
          <el-tag class="ml-1" :type="$route.path==item.path?'':'info'" :closable="!(0==ind)" :effect="$route.path==item.path?'dark':'plain'" @click="switTag(item)" @close="handleClose(ind)">
            <el-icon v-if="$route.path==item.path">
              <LocationInformation />
            </el-icon>
            {{$t(item.title)}}
          </el-tag>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="RefreshRight" @click="refresh(ind)">刷新</el-dropdown-item>
              <el-dropdown-item :icon="Close" :disabled="tagList.length-1==ind?true:false" @click="colseRight(ind)">关闭右侧标签</el-dropdown-item>
              <el-dropdown-item :icon="CircleClose" @click="closeAll()">全部关闭</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { RefreshRight, Close, CircleClose, LocationInformation } from '@element-plus/icons-vue';
import { mapState, mapActions } from "vuex" //引入辅助函数
export default {
  computed: {
    // 使用对象展开运算符简化对象
    ...mapState({
      tagList: state => state.tags.tagList
    })
  },
  components: {
    LocationInformation
  },
  data() {
    return {

    }
  },
  setup() {
    return {
      RefreshRight,
      Close,
      CircleClose,
    }
  },
  methods: {
    ...mapActions([
      'switTag',
      'handleClose',
      'refresh',
      'colseRight',
      'closeAll'
    ]),
  },
  watch: {
    $route(newVal, olaVal) {
      if ('/login' == newVal.path) return this.tagList = []  //登录进来没有title 监听路由会报错
      if('refreshview' == newVal.name) return  //刷新页面 不添加标签
      this.$store.dispatch('option', newVal)  //监听 操作添加数据
    }
  },
  created() {
    this.$store.dispatch('option', this.$route)
  }
}
</script>

<style lang="less" scoped>
.tagBox {
  margin-top: 10px;
  padding: 5px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  .ml-1 {
    margin-left: 10px;
    cursor: pointer;
  }
}
.scrollbar-flex-content {
  display: flex;
}
</style>